<template>
  <view>
    <view class="zf_ding">
      <view class="zf_ding_h1">
        <view>{{ title }}</view>
      </view>

      <view class="zf_ding_h2">
        <view>{{ getparams.start_time }} 至 {{ getparams.end_time }}</view>
      </view>

      <view class="zf_ding_h3">
        <view>（共计{{ detail.day }}）</view>
      </view>
    </view>

    <view class="ge2"></view>

    <view class="zf_zhong">
      <view class="zf_zhong_t1">会员名字</view>
      <view class="zf_zhong_t2">{{ userinfo.nickname }}</view>
    </view>

    <view class="zf_zhong">
      <view class="zf_zhong_t1">会员优惠</view>
      <view class="zf_zhong_t2">{{ detail.discount }}折</view>
    </view>

    <view class="zf_zhong">
      <view class="zf_zhong_t1">订单金额</view>
      <view class="zf_zhong_t2">￥{{ detail.price }}</view>
    </view>

    <view class="zf_zhong">
      <view class="zf_zhong_t1">会员优惠</view>
      <view class="zf_zhong_t2">-￥{{ math.subtract(detail.price, detail.pay_price) }}</view>
    </view>

    <!--    <view class="ge2"></view>-->
    <!--    <view class="zf_zhong">-->
    <!--      <view class="zf_zhong_t1">支付方式</view>-->
    <!--      <view class="zf_zhong_t2">-->
    <!--        <radio-group class="uni-flex uni-row radio-group" style="flex-wrap: wrap" @change="paymentChange">-->
    <!--          <radio :value="1" :checked="payment==1" style="margin-right: 15px" class="radio r">微信</radio>-->
    <!--          <radio :value="2" :checked="payment==2" style="margin-right: 15px" class="radio r1">余额</radio>-->
    <!--        </radio-group>-->
    <!--      </view>-->
    <!--    </view>-->

    <view class="ge2"></view>
    <view class="zf_zhong_xia">
      <image class="zf_zhong_xia_img" src="/static/pages/img/美团 (1).png"></image>
      <view class="zf_zhong_xia_text1">美团验券</view>
      <view class="zf_zhong_xia_text2" @tap="showModalFun">点击验券</view>
    </view>
    <view class="zf_zhong_xia">
      <image class="zf_zhong_xia_img" src="/static/pages/img/抖音yq.png"></image>
      <view class="zf_zhong_xia_text1">抖音验券</view>
      <view class="zf_zhong_xia_text2" @tap="showModal2Fun">点击验券</view>
    </view>


    <navigator class="zf_zhong_xia" :url="'/packageA/xzchuzhika/xzchuzhika?order_pay='+detail.pay_price">
      <image class="zf_zhong_xia_img" src="/static/pages/img/优惠券.png"></image>
      <view class="zf_zhong_xia_text1">储值卡</view>
      <view class="zf_zhong_xia_text3">
        {{ payment == 1 ? '未使用' : '1张' }}
        <image class="zf_zhong_xia_img2" src="/static/pages/img/grzy跳转.png"></image>
      </view>
    </navigator>

    <view class="zf_zhong_xia">
      <view class="zf_zhong_xia_text4">应付款</view>
      <view class="zf_zhong_xia_text4">￥{{ curpay == -1 ? detail.pay_price : curpay }}</view>
    </view>

    <view class="zf_ts">
      <view class="zf_ts_v1">
        请在
        <text class="zf_ts_t">2</text>
        分钟内完成支付
      </view>
      <view class="zf_ts_v2">
        订单开始
        <text class="zf_ts_t">2</text>
        小时前取消订单，逾期不可取消
      </view>

      <view class="zf_ts_qrzf" @click="subpay()">
        <view>确认支付</view>
      </view>
    </view>

    <!-- 点击验券 -->
    <view class="modal-mask" v-if="showYanquan" @tap="hideYanquan">
      <view class="modal-container">
        <!-- 弹窗内容 -->
        <view>
          <!-- 外框 -->
          <view>
            <!-- 顶层 -->
            <view class="tc_dc_tpk">
              <view class="tc_dc_tp"></view>
            </view>

            <view class="tc_dc_tpk">
              <view>去兑换团购券</view>
            </view>
          </view>
          <view class="tc_xc_kk">
            <!-- 下层框框 -->
            <view class="tc_xc_kk1">
              <!-- 暂不使用框框 -->
              <view class="tc_xc_nk">
                <view>按钮</view>
                <view class="tc_xc_nk_text1">暂不使用团购券</view>
              </view>
              <view class="tc_xc_nk2">
                <view>抵用券</view>
              </view>
            </view>

            <view class="tc_xc_kk2">
              <!-- 券框 -->
              <view class="tc_xc_nk">
                <view>按钮</view>
                <view class="tc_xc_nk_red">140.'00'</view>
                <view class="tc_xc_nk_text2">【工作日】舒适中包4小时（周一/周二/周三/周四）</view>
              </view>

              <view class="tc_xc_nk2">团购券，可抵用时长：4小时</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 美团验券 -->
    <view class="modal-mask" v-if="showModal">
      <view class="modal-container">
        <image class="_x" @tap="hideModal" src="/static/pages/img/x .png"></image>
        <!-- 弹窗内容 -->
        <view class="gr_tc_ding">
          <image class="gr_tc_tp" src="/static/pages/img/美团 (1).png"></image>
          <image class="gr_tc_tp" src="/static/pages/img/大众点评.png"></image>
        </view>

        <view class="dyyq_ss">
          <input class="input_md" type="text" placeholder="请输入美团券码" v-model:value="meituan.code"/>
          <image class="dyyq_sm" src="/static/pages/img/扫码.png" @tap="mtsm()"></image>
        </view>

        <view class="gr_tc_xyb" @tap="verCardCoupon()">
          <view>下一步</view>
        </view>
      </view>
    </view>

    <!-- 抖音验券 -->
    <view class="modal-mask" v-if="showModal2">
      <view class="modal-container">
        <image class="_x" @tap="hideModal" src="/static/pages/img/x .png"></image>
        <!-- 弹窗内容 -->
        <view class="gr_tc_ding gr_tc_dy">
          <image class="gr_tc_tp" src="/static/pages/img/抖音yq.png"></image>
        </view>

        <view class="dyyq_ss">
          <input class="input_md" type="text" placeholder="请输入抖音券码" v-model:value="douyin.code"/>
          <image class="dyyq_sm" src="/static/pages/img/扫码.png" @tap="dysm()"></image>
        </view>

        <view class="gr_tc_xyb" @tap="verdouyin()">
          <view>下一步</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// pages/dingdanzhifu/dingdanzhifu.js
import {houseorderorderPay, houseordersubmit, submitpreview, verificationCardCoupon, verifyTicket} from "@/common/api";
import {math} from "@/common/mathutils";
import {subscribe} from "@/common/dingyue";

var app = getApp();
export default {
  computed: {
    math() {
      return math
    }
  },
  data() {
    return {

      curpay: -1,
      meituan: {
        code: ''
      },
      douyin: {
        code: ''
      },
      // 示例手机号码
      showModal: false,
      showModal2: false,
      showYanquan: false,
      getparams: {
        package_id: -1,
        house_id: '',
        start_time: '',
        end_time: '',
        book_type: '1'
      },
      day: '',
      detail: {},
      userinfo: {},
      mpaytype: 1,
      againorder: {},
      title: "",
      payment: 1
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad(options) {
    this.mpaytype = (options.mpaytype || 1);
    this.title = options.title
    this.getparams.end_time = options.end
    this.getparams.start_time = options.start
    this.getparams.house_id = options.house_id
    this.getparams.package_id = options.package_id
    console.log('options',this.getparams,options)
    this.day = options.day
    this.curmoney = options.curmoney
    this.againorder = {
      order_id: options.order_id,
      pay_type: options.pay_type,
      type: options.type,
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.userinfo = app.globalData.userinfo
    this.getsubmit_preview()
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    paymentChange(e) {
      console.log('paymentChange', e)
      this.payment = e.detail.value
    },
    showModalFun: function () {
      this.setData({
        showModal: true
      });
    },
    showModal2Fun: function () {
      this.setData({
        showModal2: true
      });
    },
    hideModal: function () {
      this.setData({
        showModal: false,
        showModal2: false
      });
    },
    mtsm() {
      let _this = this
      // 只允许通过相机扫码
      uni.scanCode({
        onlyFromCamera: true,
        success: function (res) {
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
          _this.mtyanquasan(res.result)
        }
      });
    },
    dysm() {
      let _this = this
      // 只允许通过相机扫码
      uni.scanCode({
        onlyFromCamera: true,
        success: function (res) {
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
          _this.dyyanquasan(res.result)
        }
      });
    },
    godingdan(url) {
      if (app.globalData.loginstatus == 2) {
        uni.navigateTo({
          url: url
        })
      } else {
        uni.navigateTo({
          url: "/packageC/login/login"
        })
      }
    },
    mtyanquasan(code) {
      verificationCardCoupon({
        verification_code: code
      }, res => {
        if (res.data.code == 0) {
          this.meituan.code = ''
          console.log('verifyTicket', res)
          this.showModal = false
          uni.navigateTo({url: "/packageA/wodedingdan/wodedingdan"})
        } else {
          uni.showModal({
            title: res.data.msg,
            showCancel: false,
            icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
            duration: 2000    //持续时间为 2秒
          })
        }
      })
    },
    //美团点评验券
    verCardCoupon() {
      if (!this.meituan.code.trim()) {
        uni.showModal({
          showCancel: false,
          title: '请填写券码',
          icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
          duration: 2000    //持续时间为 2秒
        })
        return
      }
      this.mtyanquasan(this.meituan.code)
    },
    dyyanquasan(code) {
      verifyTicket({
        code: code
      }, res => {
        if (res.data.code == 0) {
          this.douyin.code = ''
          console.log('verifyTicket', res)
          this.showModal2 = false
          uni.navigateTo({url: "/packageA/wodedingdan/wodedingdan"})
        } else {
          uni.showModal({
            title: res.data.msg,
            showCancel: false,
            icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
            duration: 2000    //持续时间为 2秒
          })
        }
      })
    },
    //抖音验券
    verdouyin() {
      if (!this.douyin.code.trim()) {
        uni.showModal({
          showCancel: false,
          title: '请填写券码',
          icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
          duration: 2000    //持续时间为 2秒
        })
        return
      }
      this.dyyanquasan(this.douyin.code)

    },
    // 支付
    payfun(params) {
      let _this = this
      houseorderorderPay(params, payres => {
        if (payres.data.code == 0) {
          if (_this.payment == 1 || _this.payment == 4) {
            //微信支付
            uni.requestPayment({
              ...payres.data.data,
              success(wxres) {
                console.log('requestPayment', wxres)
                uni.showModal({
                  title: '支付成功',
                  showCancel: false,
                  success: () => {
                    subscribe(['CqKaugm0o3gjZ4Exoo3gWeZAI1LMWo_mXoPkMT2kzgc','xnwxlKFwJWvBKn3G0_X1c5en9GJwRcUDyi7vGn55EB4'],()=>{
                      uni.redirectTo({
                        url: '/packageA/wodedingdan/wodedingdan'
                      })
                    })
                  }
                })
              },
              fail(e) {
                uni.showModal({
                  title: "支付失败",
                  showCancel: false,
                  success: () => {
                    uni.redirectTo({
                      url: '/packageA/wodedingdan/wodedingdan'
                    })
                  }
                })
              }
            })
          } else {
            //余额支付结果
            uni.showModal({
              title: payres.data.msg,
              showCancel: false,
              success: () => {
                subscribe(['kbIKMTm71A1xGgiSsbHElEBv_BBboL96j4_nUWfWKO4','hMTYDDg_4Xd-Mm0cYKN4K3B3dTMgj8KPazU1JLTp7cs','CqKaugm0o3gjZ4Exoo3gWeZAI1LMWo_mXoPkMT2kzgc'],()=>{
                  uni.redirectTo({
                    url: '/packageA/wodedingdan/wodedingdan'
                  })
                })
              }
            })
          }
        } else if (payres.data.code == 202) {
          _this.payment = 4
          this.payfun({...params, pay_type: 4})
        } else {
          uni.showModal({
            title: payres.data.msg,
            showCancel: false
          })
        }
      })
    },
    // 确认支付
    subpay() {
      let _this = this
      if (this.mpaytype == 2) {
        //继续支付
        this.payfun({...this.againorder, pay_type: _this.payment})
      } else {
        //首次支付
        console.log("测试", this.userinfo)
        houseordersubmit({
          house_id: this.getparams.house_id,
          start_time: this.getparams.start_time,
          end_time: this.getparams.end_time,
          username: this.userinfo.username,
          package_id:this.getparams.package_id,
          tel: this.userinfo.mobile,
          pay_type: this.payment
        }, subres => {
          console.log('subres', subres)
          if (subres.data.code == 0) {
            // this.payment =1
            this.payfun({
              order_id: subres.data.data.id,
              pay_type: _this.payment,
              type: subres.data.data.type,
            })
          } else {
            uni.showModal({
              title: subres.data.msg,
              showCancel: false,
              success: function (res) {

              }
            })
          }
        })
      }

    },
    // 提交预约订单-预览
    getsubmit_preview() {
      submitpreview(this.getparams, res => {
        if (res.data.code == 0) {
          this.detail = res.data.data
        } else {
          uni.showModal({
            title: res.data.msg,
            showCancel: false,
            success: function (res) {
              uni.navigateBack()
            }
          })
        }
      })
    },


    hideYanquan: function () {
      this.setData({
        showYanquan: false
      });
    }
  }
};
</script>
<style>
.zf_ding {
  margin: 30rpx 20% 30rpx 20%;
  color: rgb(66, 65, 65);
}

.zf_ding_h1 {
  margin-top: 30rpx;
  font-size: 45rpx;
  display: flex; /* 使用Flexbox布局 */
  justify-content: center;
  align-items: center;
}

.zf_ding_h2 {
  margin-top: 30rpx;
  font-size: 35rpx;
  display: flex; /* 使用Flexbox布局 */
  justify-content: center;
  align-items: center;
}

.zf_ding_h3 {
  margin-top: 30rpx;
  font-size: 30rpx;
  display: flex; /* 使用Flexbox布局 */
  justify-content: center;
  align-items: center;
}

.zf_zhong {
  margin: 0 40rpx 0 40rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
  color: rgb(138, 137, 137);
  font-size: 30rpx;
}

/*.zf_zhong_t1{

}
.zf_zhong_t2{
color: rgb(141, 95, 34);
}*/

.zf_ts {
  background-color: rgb(238, 237, 237, 0.5);
  height: 37vh;
  font-size: 28rpx;
  color: rgb(75, 73, 73);
}

.zf_ts_t {
  color: rgb(255, 0, 0);
}

.zf_ts_v1 {
  padding: 40rpx 0 10rpx 230rpx;
}

.zf_ts_v2 {
  padding: 0 0 0 100rpx;
}

.zf_zhong_xia {
  margin: 0 40rpx 0 40rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
  font-size: 30rpx;
}

.zf_zhong_xia_img {
  width: 60rpx;
  height: 60rpx;
}

.zf_zhong_xia_img2 {
  width: 40rpx;
  height: 40rpx;
}

.zf_zhong_xia_text1 {
  margin-left: -350rpx;
  margin-bottom: 10rpx;
}

.zf_zhong_xia_text2 {
  margin-bottom: 10rpx;
  color: rgb(141, 95, 34);
  font-weight: bold; /* 设置字体加粗 */
}

.zf_zhong_xia_text3 {
  color: rgb(141, 95, 34);
}

.zf_zhong_xia_text4 {
  color: rgb(102, 101, 101);
  font-size: 30rpx;
  font-family: Arial, sans-serif;
}

.zf_ts_qrzf {
  color: rgb(104, 65, 28);
  border-radius: 10rpx; /* 设置边框圆角 */
  background-color: rgb(245, 215, 170);
  width: 700rpx;
  height: 90rpx;
  display: flex; /* 使用Flexbox布局 */
  justify-content: center;
  align-items: center;
  margin: 200rpx 20rpx 0 20rpx;
}

.modal-mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 9999;
}

.modal-container {
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
  overflow: hidden;
}

.tc_dc_tpk {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20rpx 0 20rpx 0;
  color: rgb(226, 185, 71);
  font-weight: bold; /* 设置字体加粗 */
}

.tc_dc_tp {
  background-color: aqua;
  width: 70rpx;
  height: 70rpx;
}

.tc_xc_kk {
  background-color: rgb(248, 248, 248);
  padding-top: 20rpx;
}

.tc_xc_kk2 {
  height: 170rpx;
  background-color: rgb(255, 255, 255);
  border-radius: 10rpx; /* 设置边框圆角 */
  width: 95%;
  margin: 0rpx 20rpx 20rpx 20rpx;
}

.tc_xc_kk1 {
  height: 170rpx;
  background-color: rgb(255, 255, 255);
  border-radius: 10rpx; /* 设置边框圆角 */
  width: 95%;
  margin: 0rpx 20rpx 20rpx 20rpx;
}

.tc_xc_nk {
  display: flex;
  align-items: center;
  height: 100rpx;
  padding-left: 20rpx;
  border-bottom: 1rpx solid rgb(243, 243, 243);
}

.tc_xc_nk2 {
  padding-left: 20rpx;
  display: flex;
  align-items: center;
  height: 70rpx;
  font-size: 25rpx;
  color: rgb(153, 150, 150);
}

.tc_xc_nk_text1 {
  font-weight: bold; /* 设置字体加粗 */
  color: rgb(83, 82, 82);
  margin-left: 160rpx;
}

.tc_xc_nk_red {
  color: rgb(255, 0, 0);
  font-weight: bold; /* 设置字体加粗 */
}

.tc_xc_nk_text2 {
  color: rgb(117, 116, 116);
  font-size: 28rpx;
}

.grzx_xx {
  margin: 20rpx 0 60rpx 50rpx;
  display: flex;

  align-items: center;
}

.grzx_tx {
  width: 170rpx;
  height: 170rpx;
  border-radius: 50%;
  background-color: rgb(224, 215, 208);
  margin-right: 40rpx;
}

.grzx_dh {
  margin-bottom: 30rpx;
  width: 320rpx;
  display: flex;
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
}

.grzx_name {
  font-size: 40rpx;
  margin-right: 15rpx;
}

.grzx_hy {
  margin-top: 13rpx;
  font-size: 23rpx;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  border-radius: 100rpx; /* 设置边框圆角 */
  width: 100rpx;
  height: 30rpx;
  padding: 3rpx 5% 3rpx 5%;
}

.grzy_hm {
  color: rgb(126, 124, 124);
}

.grzy_lbk {
  margin: 50rpx 30rpx 80rpx 30rpx;
}

.grzy_lb {
  display: flex;
  margin: 30rpx 20rpx 30rpx 20rpx;
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
}

.grzy_tp {
  width: 60rpx;
  height: 60rpx;
  margin-right: -300rpx;
}

.grzy_tztb {
  width: 40rpx;
  height: 40rpx;
}

.grzx_xx_tztb {
  margin-left: 40px;
}

.gr_tc_dy {
  padding-left: 20rpx;
}

.modal-mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 9999;
}

.modal-container {
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

.dyyq_ss {
  margin: 80rpx 30rpx 0 30rpx;
  padding: 0 30rpx 0 30rpx;
  height: 90rpx;
  background-color: rgb(238, 238, 238);
  border-radius: 12rpx; /* 设置边框圆角 */
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
}

.dyyq_sm {
  width: 50rpx;
  height: 50rpx;
}

.gr_tc_tp {
  width: 70rpx;
  height: 70rpx;
}

.gr_tc_ding {
  margin: 40rpx 0 40rpx 40%;
}

.gr_tc_xyb {
  background-color: rgb(90, 90, 90);
  height: 90rpx;
  margin: 40rpx 30rpx 60rpx 30rpx;
  border-radius: 12rpx; /* 设置边框圆角 */
  display: flex;
  justify-content: center;
  align-items: center;
}

._x {
  width: 40rpx;
  height: 40rpx;
  margin: 40rpx 0rpx 0rpx 670rpx;
}
</style>
